<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
</head>
<style>
    .container {
        width: 600px;
        height: 500px;
        position: relative;
        margin: auto;
        margin-top: 160px;
    }
    
    .main {
        overflow: hidden;
        width: 600px;
        height: 500px;
        position: relative;
    }
    
    img {
        width: 600px;
        height: 500px;
        object-fit: cover;
        object-position: top center;
        position: absolute;
    }
    
    .point {
        width: 300px;
        height: 50px;
        position: absolute;
        bottom: 15px;
        left: 130px;
    }
    
    .point li {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background: #ccc;
        margin-left: 5px;
        list-style: none;
        text-align: center;
        line-height: 50px;
        font-size: 25px;
        cursor: pointer;
    }
    
    .last,
    .next {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        position: absolute;
        top: 225px;
        background: #ccc;
        font-size: 25px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
    }
    
    .last {
        left: 0;
    }
    
    .next {
        right: 0;
    }
</style>

<body>
    <div class="container">
        <div class="main">
            <img src="./img/01.png" alt="">
            <img src="./img/02.png" alt="">
            <img src="./img/03.png" alt="">
            <img src="./img/04.png" alt="">
            <img src="./img/05.png" alt="">
        </div>
        <ul class="point">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="last">&lt;</div>
        <div class="next">&gt;</div>
    </div>
    <script src="./js/index.js"></script>
</body>

</html>